<template>
  <div class="doctor-recommend">
    <div class="section-header">
      <div class="section-title">专家推荐</div>
      <div class="view-all" @click="onViewAll">查看全部 &gt;</div>
    </div>
    
    <van-swipe class="doctor-swipe" :loop="false" :width="150" :show-indicators="false">
      <van-swipe-item v-for="(doctor, index) in doctors" :key="index" @click="onDoctorClick(doctor.id)">
        <div class="doctor-card">
          <img :src="doctor.avatar || '/images/doctor-default.jpg'" class="doctor-avatar" />
          <div class="doctor-name">{{ doctor.name }}</div>
          <div class="doctor-title">{{ doctor.title }}</div>
          <div class="doctor-dept">{{ doctor.department }}</div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface DoctorRecommendProps {
  hospitalId: number
}

const props = defineProps<DoctorRecommendProps>()
const router = useRouter()

interface Doctor {
  id: number
  name: string
  avatar?: string
  title: string
  department: string
}

const doctors: Doctor[] = [
  { id: 1, name: '张医生', avatar: '/images/doctor1.jpg', title: '主任医师', department: '心内科' },
  { id: 2, name: '李医生', avatar: '/images/doctor2.jpg', title: '副主任医师', department: '神经科' },
  { id: 3, name: '王医生', avatar: '/images/doctor3.jpg', title: '主任医师', department: '呼吸科' },
  { id: 4, name: '赵医生', avatar: '/images/doctor4.jpg', title: '副主任医师', department: '骨科' }
]

const onViewAll = () => {
  router.push(`/hospital/${props.hospitalId}/doctors`)
}

const onDoctorClick = (doctorId: number) => {
  router.push(`/hospital/${props.hospitalId}/doctor/${doctorId}`)
}
</script>

<style scoped lang="scss">
.doctor-recommend {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    .view-all {
      font-size: 12px;
      color: #888;
    }
  }
  
  .doctor-swipe {
    height: 180px;
    
    .doctor-card {
      width: 140px;
      height: 170px;
      background: #f9f9f9;
      border-radius: 8px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .doctor-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 8px;
      }
      
      .doctor-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }
      
      .doctor-title {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
      }
      
      .doctor-dept {
        font-size: 12px;
        color: #1890FF;
        background: #E6F7FF;
        padding: 2px 8px;
        border-radius: 12px;
        display: inline-block;
      }
    }
  }
}
</style> 